<!DOCTYPE html>
<html>
 	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../css/weui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/jquery-weui.min.css" />
    <title>签名</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			font-size: 12px;
		}
		
		html {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		
		#print {
			position: relative;
			height: 100%;
		}
		
		#print .man {
			box-sizing: border-box;
		}
		
		@media screen and (orientation: portrait) {
			#print .man {
				width: 85%;
				height: 100%;
				border: 1px solid #e5e5e5;
				margin: auto;
				text-align: center;
				position: absolute;
				left: 15%;
				top: 0;
			}
			.btn_warp {
				width: 15%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				position: absolute;
				left: 0;
				top: 0;
			}
			.btn_warp .btn {
				width: 100%;
				height: 50%;
			}
		}
		
		@media screen and (orientation: landscape) {
			#print .man {
				width: 100%;
				height: 85%;
				border: 1px solid #e5e5e5;
				margin: auto;
				text-align: center;
			}
			.btn_warp {
				width: 100%;
				height: 15%;
				display: flex;
				flex-wrap: wrap;
			}
			.btn_warp .btn {
				width: 50%;
				height: 100%;
			}
		}
		
		.btn_warp .btn {
			box-sizing: border-box;
			font-size: 34px;
			border: 0;
			border-right: 1px solid #000;
		}
		
		.btn_warp .clear {
			background: #e2e2e2;
			color: #000;
			border: 0;
		}
		
		.btn_warp .save {
			background: #0562B0;
			color: #fff;
		}
		
		.btn_warp span {
			display: inline-block;
			font-size: 14px;
			transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			/* IE 9 */
			-moz-transform: rotate(90deg);
			/* Firefox */
			-webkit-transform: rotate(90deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(90deg);
		}
		
		.btn_warp .edit {
			background: #e2e2e2;
			color: #000;
			border: 0;
		}
	</style>
	 <script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/baseConfig.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="print" class="box">
			<div class="man">
				<canvas id="canva" width="0" height="0"></canvas>
			</div>
			<div class="btn_warp">
				<button class="btn clear"><span>清除</span></button>
				<button class="btn save"><span>保存</span></button>
			</div>
		</div>
		<div class="box_show" style="display: none;">
			<div class="man">
				<img src="" / style="margin-left: 15%;">
			</div>
			<div class="btn_warp">
				<button class="edit"><span>重新编辑</span></button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var width = document.documentElement.clientWidth;
		var height = document.documentElement.clientHeight;
		//初始化cnavas的宽高，适配手机端

		var $main = $(".man");
		var mainW = $main.width();
		var mainH = $main.height();
		//		   console.log(mainH)
		var canvas = document.getElementById('canva');
		var ctx = canvas.getContext("2d");
		var $canvas = $(canvas);
		var pos = $canvas.offset();

		$canvas.attr("width", mainW);
		$canvas.attr("height", mainH);
		ctx.fillStyle = '#ccc';
		ctx.strokeStyle = '#000';
		ctx.lineWidth = "3";

		//ctx.translate(0,mainH);
		//ctx.rotate(270*Math.PI/180);
		//ctx.fillRect(0,10,100,50);

		$canvas.on('touchstart', function(e) {
			var _touch = e.originalEvent.targetTouches[0];
			var x = _touch.pageX - pos.left + mainW / 2;
			var y = _touch.pageY - pos.top;
			ctx.beginPath();
			ctx.moveTo(x, y);
			this.run = true;
			e.preventDefault();
		});
		$canvas.on('touchmove', function(e) {

			var _touch = e.originalEvent.targetTouches[0];
			var x = _touch.pageX - pos.left + mainW / 2;
			var y = _touch.pageY - pos.top;
			if(this.run) {
				//				console.log(x,y);
				ctx.lineTo(x, y);
				ctx.stroke();
			}
			e.preventDefault();
		});
		$canvas.on('touchend', function(e) {
			ctx.stroke();
			ctx.closePath();
			this.run = false;
			e.preventDefault();
		});
		//重画
		$(".clear").on("click", function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		});

		//保存
		$(".save").on("click", function() {
			dataURL = canvas.toDataURL('image/png');
			console.log(11)
			if(!dataURL) {
				alert() //给个提示
			} else {
				$.ajax({
					type: "post",
					url: baseConfig.localHttp + "weChatApi/fgclient/confirmPound",
					async: false,
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						orderNo: baseConfig.GetQueryString('orderNo'),
						carNo: baseConfig.GetQueryString('carNo'),
						imgSignature:dataURL
					},
					success: function(data) {
						console.log(data)
						if(data.code == 100) {
							$.toptip(data.content, 1200, 'success');
							location.href = "mine.html"
						} else {
							$.toptip(data.content, 1200, 'error');
						}
					},
					error: function() {
						$.hideLoading();
						$.toast("请求失败", "cancel");
					}
				})
			}
			//这里是图片路径base64位格式的
//			$(".box").hide();
//			$(".box_show").show();
//			$(".box_show .man img").attr("src", dataURL)
//			$(".edit").on("click", function() {
//				$(".box").show();
//				$(".box_show").hide();
//			});
			//输出base64
		});
	</script>

</html>